<div style="height: 600px">
    <form class="layui-form layui-card" action="{:request()->url()}" data-auto="true" method="post" autocomplete="off">
        <style>
            .bspan {
                background-color: rgb(0, 150, 136);
                color: #666 !important;
                border-width: 1px;
                border-style: solid;
                border-color: rgb(0, 150, 136);
                color: #FFFFFF !important;
                border-radius: 3px;
                height: 25px;
                line-height: 25px;
                font-size: 14px;
                margin-top: 5px;
                margin-bottom: 5px;
            }
        </style>

        <div style="min-height: 400px;">
            <div>
                <div style="padding: 20px" id="demo1"></div>
            </div>
            <div style="padding-left: 20px;padding-right: 20px">
                <div id="sles" style="border-style: solid;background-color: #FFFFFF;border-radius: 8px;padding: 20px;margin-bottom: 20px">
                    <a id="push">
                    </a>
                </div>
            </div>
        </div>

        {notempty name='vo.id'}<input type='hidden' value='{$vo.id}' name='id'>{/notempty}
        <div class="layui-form-item text-center">
            <button class="layui-btn" type='submit'>保存数据</button>
            <button class="layui-btn layui-btn-danger" type='button' data-confirm="确定要取消编辑吗？" data-close>取消编辑</button>
        </div>
    </form>
</div>
        <script>
            /*! 表单初始化 */
            window.form.render();
            /*! 加载扩展插件 */
            var seled = eval('<?php echo json_encode($seled); ?>');
            var buslet = eval('<?php echo json_encode($result);?>');
            var demo;

            require(['xmSelect'], function (res) {
                 demo = xmSelect.render({
                    el: '#demo1',
                    filterable: true,
                    data: buslet,
                    id:'$onebtype',
                    toolbar: { show: true },
                    height: '250px',
                    on: function(data) {
                        var arr = data.arr;
                        var change = data.change;
                        var isAdd = data.isAdd;
                        console.log(data)

                        if (isAdd)
                        {
                            for (i=0; i < change.length; i++) {
                                $("#push").append("<span id='" + change[i].value + "' onclick='desel(" +
                                change[i].value + ")' class='layui-badge bspan'>" + change[i].name +
                                "<i class='xm-iconfont xm-icon-close' style='margin-left: 5px'></i></span>"
                                );
                            }
                            if (arr.length==0)
                            {
                                $('#sles').empty();
                            }
                        }else{
                            for (i = 0; i < change.length; i++) {
                                var x='#' + change[i].value; $(x).remove();
                            }
                        }

                        if ($("#push").children().length==0) {
                            $('#sles').hide()
                        } else {
                            $('#sles').show()
                        }


                    }
                });
            });

            if ($("#push").children().length == 0) {
                if (seled.length>0)
                {
                    for (i = 0; i < seled.length; i++) {
                        $("#push").append("<span id='" + seled[i].value + "' onclick='desel(" +
                            seled[i].value + ")' class='layui-badge bspan' >" + seled[i].name +
                            "<i class='xm-iconfont xm-icon-close' style='margin-left: 5px'></i></span>"
                        );
                    }
                }else{
                    $('#sles').hide()
                }
            }

            function desel(id) {
                var x = '#' + id;
                $(x).remove();
                demo.delete([id])
            }

        </script>

